<?php

/* @var $this yii\web\View */
use yii\helpers\Url;
use common\helpers\Render;
use common\models\User;

$this->title = '注册';
?>

<style>
    #pg-contenter {margin:0;height:580px;padding:80px 0;background:url(<?= Url::to('@web/web/static/image/register-banner.jpg') ?>) center no-repeat;}
    #register-contain {float:right;width:260px;margin:80px 0;font-size:14px;padding:30px;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:2px;box-shadow:0 0 5px rgba(0,0,0,0.5);}
    #register-title {height:25px;line-height:25px;margin-bottom:20px;color:#666;font-size:20px;}
    #register-title span {float:right;line-height:28px;font-size:14px;}
    #register-title span a {color:#f00;}
    #register-tags {height:40px;line-height:40px;font-size:16px;background-color:#ddd;cursor:pointer;}
    #register-tags #designer,
    #register-tags #employer {float:left;width:50%;text-align:center;}
    #register-tags #designer.active,
    #register-tags #employer.active {color:#fff;background-color:#f00;}
    #captcha-panel {position:relative;}
    #get-captcha {position:absolute;top:5px !important;right:5px;height:30px;width:90px;font-size:12px;cursor:pointer;}

    .form-item {position:relative;}
    .form-item .input-title {position:absolute;top:0;left:0;width:40px;height:40px;line-height:40px;text-align:center;background-color:#eee;border-radius:3px 0 0 3px;}
    .form-item .flyer-button,
    .form-item .flyer-input {width:100%;height:40px;margin-bottom:20px;padding:0 10px;font-size:14px;border:none;border-radius:3px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;box-shadow:0 0 5px rgba(0,0,0,.4);}
    .form-item .flyer-input {padding-left:50px;}
    .form-item .flyer-button {margin-bottom:0;}

    .has-error .flyer-input {box-shadow:0 0 5px #cf6666;}
    .has-pass .flyer-input {box-shadow:0 0 5px #3c763d;}
</style>
<div class="contenter clear">
    <div id="register-contain">
        <div id="register-title">账户注册<span>已有账户？<a href="<?= Url::to('@web/user/login') ?>">立即登录</a></span></div>
        <div id="register-tags">
            <div class="active" id="designer" data-role="<?= User::RoleDesigner ?>">设计师</div>
            <div id="employer" data-role="<?= User::RoleEmployer ?>">雇主</div>
        </div>
        <form class="mt-20px pane" id="flyer-register" action="<?= Url::to('@web/user/register') ?>" method="post">
            <div class="form-item checker">
                <div class="input-title fs-24px"><i class="icon-mobile-phone"></i></div>
                <div class="input-block"><input class="flyer-input" name="mobile" type="text" placeholder="手机号."></div>
            </div>
            <div class="form-item checker">
                <div class="input-title fs-18px"><i class="icon-lock"></i></div>
                <div class="input-block"><input class="flyer-input" name="password" type="password" placeholder="密码."></div>
            </div>
            <div class="form-item checker" id="captcha-panel">
                <div class="input-title fs-16px"><i class="icon-comment"></i></div>
                <div class="input-block">
                    <input class="flyer-input" name="captcha" type="text" maxlength="6" placeholder="短信验证码.">
                    <button class="flyer-button normal border-round narrow" id="get-captcha" type="button">获取验证码</button>
                </div>
            </div>
            <div class="form-item checker">
                <div class="input-title fs-18px"><i class="icon-tag"></i></div>
                <div class="input-block"><input class="flyer-input" id="inviter" name="inviter" type="text" placeholder="邀请码."></div>
            </div>
            <div class="form-item mt-10px">
                <div class="input-block">
                    <i class="icon-check"></i> 同意<span class="cl-red">《
                        <a class="cl-red" href="<?= Url::to('@web/information/service-agreement') ?>">
                            以稀网用户协议</a>》</span></div>
            </div>
            <div class="form-item mt-10px">
                <div class="inline-block w-p100">
                    <button class="flyer-button normal" id="login-button">确认注册</button>
                    <input name="skip" type="hidden" value="<?= isset($skip_url) ? $skip_url : '' ?>">
                    <input name="role" type="hidden" value="<?= User::RoleDesigner ?>">
                    <textarea id="flyer-register-json" data-form="#flyer-register" style="display:none;"><?= $relate ?></textarea>
                </div>
            </div>
            <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken() ?>">
        </form>
    </div>
</div>

<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    //设置邀请码
    function getObject(objectId) {
        if (document.getElementById && document.getElementById(objectId)) {
            return document.getElementById(objectId);
        } else if (document.all && document.all(objectId)) {
            return document.all(objectId);
        } else if (document.layers && document.layers[objectId]) {
            return document.layers[objectId];
        } else {
            return false;
        }
    }
    function get(p){
        var url= document.URL.toString();
        var tmpStr=p+"=";
        var tmp_reg=eval("/[\?&]"+tmpStr+"/i");
        if(url.search(tmp_reg)==-1)return null;
        else{
            var a=url.split(/[\?&]/);
            for(var i=0;i<a.length;i++)
                if(a[i].search(eval("/^"+tmpStr+"/i"))!=-1)return a[i].substring(tmpStr.length);
        }
    }
    window.onload=function (){
        getObject("inviter").value = get("inviter");
        //key作为input里的name名，接收到的值就是浏览器里的k参数
        //k是浏览器里的参数名
    }

    $(document).ready(function() {
        // 发送验证码操作
        tableHandler.requestSingle({
            button: '#get-captcha', isConfirm: false, isShadow: false,
            url: "<?= Url::to('@web/welcome/captcha-mobile') ?>",
            beforeRequest: function(param) {
                if( ! $('input[name=mobile]').parents('.checker').hasClass('has-pass')) {
                    layer.msg('请输入正确的手机号');
                    return false;
                }
                param.data = { mobile: $('input[name=mobile]').val() };
                $('#get-captcha').attr('disabled', true);
            },
            requestFail: function(param) {
                $('#get-captcha').removeAttr('disabled');
            },
            requestSuccess: function (param) {
                var seconds = 60;
                var timer = setInterval(function() {
                    if(--seconds > 0) {
                        $('#get-captcha').text(seconds + '秒后重试');
                    }
                    else {
                        $('#get-captcha').text('重新发送');
                        $('#get-captcha').removeAttr('disabled');
                        clearInterval(timer);
                    }
                }, 1000);
            }
        });
        $('#designer, #employer').bind('click', function() {
            if($(this).hasClass('active')) {
                return true;
            }
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            $('input[name=role]').val($(this).data('role'));
        });

        // 表单数据验证
        (new checker).init({ ruleDom: '#flyer-register-json' });

        // 异常提示
        if('<?= Yii::$app->controller->status['code'] ?>' !== '<?= SuccessCode ?>') {
            layer.msg('<?= Yii::$app->controller->status['message'] ?>', {shift: 6});
        }
    });
</script>